<template>
  <div class="box">
    <div>
      <h1>我是父组件</h1>
      <button @click="sendChile">向子组件传参</button>
      {{ msg }}
    </div>
    <div>
      <InjectChild></InjectChild>
    </div>
  </div>
</template>

<script setup>
import InjectChild from "../../components/inject/index.vue";
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  watchEffect,
  computed,
  provide,
} from "vue";
const msg=ref("")

const sendChile = () => {
    msg.value="22222"
};
//父传子
provide("sendChild", msg );
</script>
<style scoped>
.box {
  width: 500px;
  height: 500px;
}
.wrap div {
  width: 600px;
  height: 100%;
}
</style>